<template>
    <div class="detailHeader">
        <el-form :model="formData" :rules="rules" ref="ruleForm" size="small" style="padding: 20px 20px;">
            <el-form-item label="组织" prop="companyId" :label-width="formLabelWidth">
                <el-select v-model="formData.companyId" v-selecttext="formData.companyName, compData, 'companyId'" clearable
                    :disabled="disabled" style="width: 100%;">
                    <el-option v-for="item in compData" :key="item.companyId" :label="item.companyName"
                        :value="item.companyId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="customerId" :label-width="formLabelWidth">
                <el-select v-model="formData.customerId" v-selecttext="formData.customerName, customerData, 'customerId'"
                    clearable :disabled="disabled" style="width: 100%;">
                    <el-option v-for="item in customerData" :key="item.customerId" :label="item.customerName"
                        :value="item.customerId" style="width: 100%;"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="银行流水号" prop="bankSerialNo" :label-width="formLabelWidth">
                <el-input v-model="formData.bankSerialNo" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="付款账号" prop="paymentAccount" :label-width="formLabelWidth">
                <el-input v-model="formData.paymentAccount" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="付款方式" prop="paymentType" :label-width="formLabelWidth">
                <el-select v-model="formData.paymentType" clearable :disabled="disabled" style="width: 100%;">
                    <el-option v-for="item in collectionMethodData" :key="item.dictValue" :label="item.dictLabel"
                        :value="item.dictValue"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收款金额" prop="amount" :label-width="formLabelWidth">
                <el-input v-model="formData.amount" :disabled="disabled" />
            </el-form-item>
            <el-form-item label="收款日期" prop="collectionDate" :label-width="formLabelWidth">
                <el-date-picker v-model="formData.collectionDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                    :disabled="disabled" style="width: 100%;">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
                <el-input v-model="formData.remark" autocomplete="off" type="textarea" maxlength="500" show-word-limit
                    :disabled="disabled" />
            </el-form-item>
            <el-form-item label="付款凭证" :label-width="formLabelWidth">
                <Upload @changeFile="changeFile" :fileListEdit="businessLicenseList" />
                <!-- <el-upload class="upload-demo" action="" :on-remove="file => handleRemove(file, '1')"
                    :http-request="file => handleBusinessLicense(file, '1')" :on-preview="handlePreview" :multiple="true"
                    :file-list="collectionFileList">
                    <el-button type="primary" v-show="uploadShow">点击上传</el-button>
                </el-upload> -->
            </el-form-item>
        </el-form>
        <!-- <el-dialog title="预览" :modal="false" :visible.sync="dialogVisible" :before-close="handleClose">
            <div>
                <img :src="imgurl" style="width:100%;height:auto" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="downLoadFile(fileInfo)">下载</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
import { mapState } from 'vuex'
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import axios from 'axios'
import config from '@/network/config.js'
import Upload from '@/components/upload'

export default {
    name: 'detail',
    components: { BaseTable, Upload },
    props: {
        collectionMethodData: {
            type: Array
        },
        compData: {
            type: Array
        },
        customerData: {
            type: Array
        },
    },
    data() {
        return {
            formData: {
                companyId: '',
                companyName: '',
                customerId: '',
                customerName: '',
                bankSerialNo: '',
                paymentAccount: '',
                paymentType: '',
                amount: '',
                status:'1',
                collectionDate: '',
                remark: '',
                mattachmentInfoList: []
            },
            businessLicenseList: [],
            rules: {
                companyId: [
                    {
                        required: true,
                        message: '请选择组织',
                        trigger: 'blur'
                    }
                ],
                customerId: [
                    {
                        required: true,
                        message: '请选择客户名称',
                        trigger: 'blur'
                    }
                ],
                bankSerialNo: [
                    {
                        required: true,
                        message: '请输入银行流水号',
                        trigger: 'change'
                    }
                ],
                paymentAccount: [
                    {
                        required: true,
                        message: '请输入付款账号',
                        trigger: 'blur'
                    }
                ],
                paymentType: [
                    {
                        required: true,
                        message: '请选择付款方式',
                        trigger: 'blur'
                    }
                ],
                amount: [
                    {
                        required: true,
                        message: '请输入收款金额',
                        trigger: 'blur'
                    }
                ],
                collectionDate: [
                    {
                        required: true,
                        message: '请选择收款日期',
                        trigger: 'blur'
                    }
                ]
            },
            isShow: false,
            dialogVisible: false,
            valid: '', // 校验值
            loading: false, // 下拉框加载状态
            prefixCode: '', // 前缀
            isChooseDes: '',
            formLabelWidth: '120px',
            disabled: false,
            imgurl: '',
            fileInfo: null,
            uploadShow: true
        }
    },
    created() {
    },
    computed: {
        ...mapState({
            num: state => state.num,
            weight: state => state.weight
        })
    },
    mounted() {
    },
    methods: {
        // 新增跳转
        addData() {
            this.$refs.ruleForm.resetFields()
            this.disabled = false
            this.businessLicenseList = []
            this.uploadShow = true
        },
        // 编辑跳转
        updateData(val) {
            this.businessLicenseList = []
            if (this.disabled) {
                this.disabled = false
                this.uploadShow = true
            }
            if (val) {
                this.$nextTick(() => {
                    this.formData.id = val.id
                    this.formData.companyId = val.companyId
                    this.formData.companyName = val.companyName
                    this.formData.customerId = val.customerId
                    this.formData.customerName = val.customerName
                    this.formData.bankSerialNo = val.bankSerialNo
                    this.formData.paymentAccount = val.paymentAccount
                    this.formData.paymentType = val.paymentType
                    this.formData.amount = val.amount
                    this.formData.collectionDate = val.collectionDate
                    this.formData.remark = val.remark
                    if (val.mattachmentInfoList.length == 0) {
                        this.formData.mattachmentInfoList = []
                    } else {
                        this.formData.mattachmentInfoList = val.mattachmentInfoList
                        this.formData.mattachmentInfoList.forEach(item => {
                            this.businessLicenseList.push(
                                {
                                    id: item.fileId,
                                    name: item.fileName,
                                    fileId: item.fileId,
                                    fileName: item.fileName
                                }
                            )
                        })
                    }

                })
            }
        },
        // 详情跳转
        notModified() {
            if (!this.disabled) {
                this.disabled = true
                this.uploadShow = false
            }
        },
        // 校验
        valiDate() {
            if (this.businessLicenseList.length == 0) {
                return this.$message.error('请上传付款凭证')
            }else{
                this.formData.mattachmentInfoList = []
                this.businessLicenseList.forEach(item=>{
                    this.formData.mattachmentInfoList.push(item)
                })
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$emit('upData')
                } else {
                    return
                }
            })
        },
        /**
     * 修改文件
     */
        changeFile(fileList, val, item) {
            this.businessLicenseList = fileList
            if (this.businessLicenseList && this.businessLicenseList.length > 0) {
                this.businessLicenseList.forEach(v => {
                    v.fileType = item
                })
            }
        },
        // 文件上传
        handleBusinessLicense(params, type) {
            // this.formData.mattachmentInfoList = []
            const file = params.file;
            const FormDatas = new FormData()
            FormDatas.append('fileArray', file)
            FormDatas.append('businessType', '04'); // 文件夹名称

            publicapi.getFileInfo(FormDatas).then(res => {
                if (res.data.code == '0000') {
                    this.$message.success('上传成功')
                    let data = res.data.data
                    data.forEach(v => {
                        this.collectionFileList.push(
                            {
                                id: v.fileId,
                                name: v.fileName
                            }
                        )
                        this.formData.mattachmentInfoList.push(
                            {
                                fileId: v.fileId,
                                fileName: v.fileName,
                                fileType: type
                            }
                        )
                    })
                } else {
                    this.$message.error('上传失败')
                }

            })
        },
        // 文件预览
        handlePreview(file) {
            this.fileInfo = file
            if (file.name.indexOf('jpg') != -1 || file.name.indexOf('png') != -1 || file.name.indexOf('jpeg') != -1) {
                axios({
                    method: 'get',
                    url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
                    responseType: 'blob',
                    params: {
                        token: window.sessionStorage.getItem('token')
                    }
                }).then(res => {
                    const blob = new Blob([res.data], {
                        type: 'application/png;charset=utf-8'
                    });
                    const url = window.URL.createObjectURL(blob);
                    this.imgurl = url
                    this.dialogVisible = true
                })
            } else {
                this.downLoadFile(file)
            }
        },
        // 删除文件
        handleRemove(file, type) {
            this.formData.mattachmentInfoList.forEach((v, index) => {
                if (v.fileType == type) {
                    if (file.id == v.fileId) {
                        this.formData.mattachmentInfoList.splice(index, 1)
                    }
                }
            })
            this.collectionFileList.forEach((item, i) => {
                if (item.uid == file.uid) {
                    this.collectionFileList.splice(i, 1)
                }
            })
        },
        // 文件下载
        downLoadFile(file) {
            axios({
                method: 'get',
                url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.id}`,
                responseType: 'arraybuffer',
                params: {
                    token: window.sessionStorage.getItem('token')
                }
            }).then(res => {
                const content = res.data
                const blob = new Blob([content]) // 构造一个blob对象来处理数据
                const link = document.createElement('a') // 创建a标签
                link.download = file.name // a标签添加属性
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob, {
                    type: `application/pdf`
                })
                document.body.appendChild(link)
                link.click() // 执行下载
                URL.revokeObjectURL(link.href) // 释放url
                document.body.removeChild(link) // 释放标签
            }).catch((error) => {

            })
        },
        // 关闭
        handleClose(done) {
            this.$confirm('您已修改了数据，确定是否关闭？')
                .then(_ => {
                    this.popVal = ''
                    done()
                })
                .catch(_ => { })
        },
    }
}
</script>

<style lang="less" scoped>
// @import "../component/index.less";


.demo-drawer__footer {
    text-align: right;
    padding-right: 20px;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 50px;
}
</style>
